<template>
	<view class="home-template2">
		<view class="middle-tower" :style="bg1">
			<view class="list">
				<view class="list-item" @click="handleRouter(bgObj2)" :style="bg2"></view>
				<view class="list-item" @click="handleRouter(bgObj3)" :style="bg3"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		realmName
	} from "@/http";
	export default {
		name: "HomeTemplate2",
		data() {
			return {
				realmName,
				bgObj1: {},
				bgObj2: {},
				bgObj3: {}
			}
		},
		methods: {
			init(options) {
				this.bgObj1 = options.filter(item => {
					if (Number(item.configName) == 7) return item;
				})[0];
				this.bgObj2 = options.filter(item => {
					if (Number(item.configName) == 8) return item;
				})[0];
				this.bgObj3 = options.filter(item => {
					if (Number(item.configName) == 9) return item;
				})[0];
			},
			handleRouter(options) {
				if (options.uniappRoute) {
					this.$parent.handleRouter({
							name: '	中塔旅游',
							icon: '/static/icon/home/watch.png',
							path: options.uniappRoute,
							power: ['1', '2', '3'], //权限
							id: 12,
							check: false
						});
				}
			},
		},
		computed: {
			bg1() {
				return `background: url(${realmName + this.bgObj1.logoPicAddress}) center/cover no-repeat;`
			},
			bg2() {
				return `background: url(${realmName + this.bgObj2.logoPicAddress}) center/cover no-repeat;`
			},
			bg3() {
				return `background: url(${realmName + this.bgObj3.logoPicAddress}) center/cover no-repeat;`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-template2 {

		.middle-tower {
			height: 212rpx;
			position: relative;

			.list {
				position: absolute;
				top: 64rpx;
				left: 16rpx;
				right: 16rpx;
				bottom: 16rpx;
				display: flex;
				justify-content: space-between;

				.list-item {
					display: flex;
					justify-content: space-between;
					background-color: #FFFFFF;
					flex: 1;
					border-radius: 8rpx;
					height: 132rpx;
					&+ .list-item{
						margin-left: 32rpx;
					}
				}
			}
		}
	}
</style>
